<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.sex-box {
				display: flex;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #2AC845;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form id="regForm" class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入您的手机号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='pwd' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>邮箱</label>
					<input id='email' type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">
				</div>
				<div class="mui-input-row">
					<label>身份证</label>
					<input id='card_id' type="text" class="mui-input-clear mui-input" placeholder="请输入身份证">
				</div>
				<div class="mui-input-row">
					<label>姓名</label>
					<input id='name' type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row sex-box">
					<label>性别</label>
					<div class="mui-input-row mui-radio mui-left">
						<label>男</label>
						<input name="sex" type="radio" value="1" checked>
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>女</label>
						<input name="sex" type="radio" value="0">
					</div>
				</div>

			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-green" onclick="reg()">注册</button>
			</div>
			<div class="mui-content-padded">
				<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/**
			 * 注册
			 */
			function reg() {
				var account = $("#account").val();
				var pwd = $("#pwd").val();
				var email = $("#email").val();
				var card_id = $("#card_id").val();
				var name = $("#name").val();
				var sex = $("input[name='sex']:checked").val();
				if(!p.isMobile(account)) {
					mui.toast("手机号格式错误！");
					return;
				}
				if(pwd.length < 6 || pwd.length > 20) {
					mui.toast("请输入6-20位的密码！");
					return;
				} else {
					if(!p.isRightfulString(pwd)) {
						mui.toast("密码只能为英文或数字！");
						return;
					}
				}
				if(email.length > 50) {
					mui.toast("邮箱长度不能大于50！");
					return;
				} else {
					if(!p.isEmail(email)) {
						mui.toast("邮箱格式错误!");
						return;
					}
				}
				if(!p.isIdCardNo(card_id)) {
					mui.toast("身份证格式错误!");
					return;
				}
				if(name.length < 2 || name.length > 10) {
					mui.toast("请输入2-10位的姓名!");
					return;
				} else {
					if(!p.isChinese(name)) {
						mui.toast("姓名必须为汉字!");
						return;
					}
				}
				$.ajax({
					type: "POST",
					url: c.apiUrl + "/Login/reg",
					data: {
						account: account,
						pwd: pwd,
						email:email,
						card_id:card_id,
						name:name,
						sex:sex
					},
					success: function(res) {
						if(res.code==0){
							mui.toast("注册成功");
							setTimeout(function(){
								p.openPage("login.html","login.html");
							},2000);
						}else{
							mui.toast(res.message);
						}
					}
				});
			}
		</script>
	</body>

</html>